<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      div {
         float: left;
      }

      div ul li {
         list-style: none;
         width: 150px;
         height: 150px;
         background-color: green;
         border-radius: 25%;
         /* 调用动画 */
         /* 动画名 */
         animation-name: move;
         /* 动画的持续时间 */
         animation-duration: 15s;
         /* 动画的播放次数默认为1 infinite 反复 */
         animation-iteration-count: infinite;
         /* 运动曲线 */
         animation-timing-function: ease;
         /* animation: name duration timing-function delay iteration-count direction fill-mode;前2个属性必须填写  分别为 名字 - 播放周期时间（默认为0） - 动画曲线（默认为ease - ） - 等待时间（默认0） - 播放次数（默认1；infinite） - 逆向播放（默认为normal；alternate逆向）- 结束状态（保持结束状态forwards -会到起点backwards）  */
         /* animation-play-state 不包含在其中 通常配合鼠标或者其他属性配合使用 */
      }

      /* 动画的定义 move这个值是可以自定义的 */
      /* 动画序列 0-100 */
      @keyframes move {

         /* 开始状态 */
         0% {
            transform: translate(0) rotate(0);
         }

         25% {
            width: 150px;
            height: 150px;
            background-color: greenyellow;
            transform: translate(1200px, 0px) rotate(360deg);
         }

         50% {
            width: 150px;
            height: 150px;
            background-color: #0f0;
            transform: translate(1200px, 450px) rotate(180deg);
         }

         75% {
            width: 150px;
            height: 150px;
            background-color: #00f;
            transform: translate(0, 450px) rotate(0deg);
         }

         100% {
            width: 150px;
            height: 150px;
            /* opacity: 0; 透明*/
            transform: translate(0, 0) rotate(-180deg);
         }
      }
   </style>
</head>

<body>
   <div>
      <ul>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </div>
   <div>
      <ul>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </div>
</body>

</html>